const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const connect = require("gulp-connect");
const concat = require("gulp-concat");
const uglify = require("gulp-uglify");
const rename = require("gulp-rename");
const babel = require("gulp-babel");
const sourcemaps = require("gulp-sourcemaps");

gulp.task("copyHtml", (done) => {
  gulp.src("*.html").pipe(gulp.dest("dist")).pipe(connect.reload());
  done();
});

gulp.task("copyImg", (done) => {
  gulp.src("img/**").pipe(gulp.dest("dist/img"));
  done();
});

// gulp.task("copyCss", (done) => {
//   gulp.src("css/*.css").pipe(gulp.dest("dist/css")).pipe(connect.reload());
//   done();
// });
gulp.task("copyJs", (done) => {
  gulp.src("js/*.js").pipe(gulp.dest("dist/js")).pipe(connect.reload());
  done();
});

gulp.task("copyTxt", (done) => {
  gulp
    .src("download/**")
    .pipe(gulp.dest("dist/download"))
    .pipe(connect.reload());
  done();
});

gulp.task("sass", (done) => {
  gulp
    .src("sass/*.scss")
    .pipe(sourcemaps.init())
    .pipe(
      sass()
      // {outputStyle: "compressed" }
    )
    .pipe(sourcemaps.write("./"))
    .pipe(gulp.dest("dist/css"))
    .pipe(connect.reload());
  done();
});

gulp.task("server", (done) => {
  connect.server({
    root: "dist",
    livereload: true,
  });
  done();
});

gulp.task("concat", (done) => {
  gulp
    .src("js/*.js")
    .pipe(concat("main.js"))
    .pipe(gulp.dest("dist/js"))
    .pipe(uglify())
    .pipe(rename("main.min.js"))
    .pipe(gulp.dest("dist/js"));
});

gulp.task("watch", (done) => {
  gulp.watch("*.html", gulp.series("copyHtml"));
  gulp.watch("sass/*.scss", gulp.series("sass"));
  // gulp.watch("css/*.css", gulp.series("copyCss"));
  gulp.watch("js/*.js", gulp.series("copyJs"));
  gulp.watch("img/**", gulp.series("copyImg"));
  gulp.watch("download/**", gulp.series("copyTxt"));
  done();
});

gulp.task("default", gulp.parallel("server", "watch"));
